#region show
<template>
  <!-- 输入框内添加前缀后后缀 -->
  <q-input placeholder="搜索">
    <template #prefixIcon>
      <q-icon>
        <FlashOutline></FlashOutline>
      </q-icon>
    </template>
  </q-input>
  <q-input round placeholder="100,000,000">
    <template #suffixIcon> 元 </template>
  </q-input>
  <q-input round placeholder="搜索">
    <template #suffixIcon>
      <q-icon>
        <Copy></Copy>
      </q-icon>
    </template>
  </q-input>
  <!-- 输入框外添加前缀和后缀 -->
  <q-input placeholder="搜索">
    <template #prepend>
      <q-icon>
        <FlashOutline></FlashOutline>
      </q-icon>
      <span class="my-span">姓名</span>
    </template>
  </q-input>
  <q-input round placeholder="100,000,000">
    <template #append>
      <span class="my-span">美元</span>
    </template>
  </q-input>
  <q-input round placeholder="搜索">
    <template #prepend>
      <q-icon>
        <Copy></Copy>
      </q-icon>
    </template>
  </q-input>
</template>

<script setup lang="ts">
import { FlashOutline, Copy } from '@vicons/ionicons5'
</script>

<style scoped>
.q-input {
  margin-top: 10px;
}
.my-span {
  white-space: nowrap;
}
</style>
#endregion show
